<template>
   <div class="sport-calendar">
      <div class="calendar-item" v-for="item in dayList" :key="item.date"
         :class="{ 'current-day': item.shortDate === currentDay }">
         <div class="week">{{ item.week }}</div>
         <div class="week-content">
            <div class="day">{{ item.shortDate }}</div>
            <div class="reward">
               <img src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/sport-page/sport-score-coin.png"
                  class="icon">
               <div class="reward-text">{{ item.points ? '+' + item.points : '-' }}</div>
            </div>
            <img class="line" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/sport-page/line.png" />
         </div>
      </div>
   </div>
   <div class="today" v-if="todaySport">
      <div class="today_cont">
         <div class="name">今日</div>
         <div class="today_text">
            <div class="today_text_left">时长</div>
            <div class="today_text_right">{{todaySport.totalTime}}分钟</div>
         </div>
         <div class="today_text">
            <div class="today_text_left">热量</div>
            <div class="today_text_right">{{todaySport.totalCle}}kcal</div>
         </div>
         <div class="today_text">
            <div class="today_text_left">课程</div>
            <div class="today_text_right">{{todaySport.courseNum}}节</div>
         </div>
      </div>
   </div>
   <div class="tips" v-if="notice">
      <image src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/gantanhao_icon.png" mode="widthFix" class="tips-icon"></image>
      <div class="tips-text">{{notice}}</div>
   </div>   
   <div style="margin-bottom: 36rpx;"></div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Api from '@/service'
import dayjs from 'dayjs'
import useLogin from "@/functions/useLogin";

const loginS = useLogin();
const isLogin = ref(false)

const startTime = ref(dayjs().subtract(6, 'day').format('YYYY-MM-DD'))
const endTime = ref(dayjs().format('YYYY-MM-DD'))
const currentDay = ref(dayjs().format('DD'))
const checkInList = ref([])
const notice = ref('')
const todaySport = ref({})


onMounted(async() => {
   const flag = await loginS.checkLogin(true);
	isLogin.value = flag
	if (flag) {
      const userId = loginS.userInfo.value?.userId
      getTodaySport(userId)
      getSportIntegral()
   }   
})

const dayList = computed(() => {
   let dateList = []
   for (let i = 0; i <= dayjs(endTime.value).diff(dayjs(startTime.value), 'day'); i++) {
      dateList.push({
         date: dayjs(startTime.value).add(i, 'day').format('YYYY-MM-DD'),
         shortDate: dayjs(startTime.value).add(i, 'day').format('DD'),
         week: calcWeekText(dayjs(startTime.value).add(i, 'day').format('dd')),
         points: 0
      })
   }
   checkInList.value.forEach(checkItem => {
      dateList.forEach(dateItem => {
         if (checkItem.date === dateItem.date) {
            dateItem.points = checkItem.points
         }
      })

   })
   return dateList
})

const calcWeekText = (enText)=>{
   if(enText == 'Mo'){
      return '一'
   }
   if(enText == 'Tu'){
      return '二'
   }
   if(enText == 'We'){
      return '三'
   }
   if(enText == 'Th'){
      return '四'
   }
   if(enText == 'Fr'){
      return '五'
   }
   if(enText == 'Sa'){
      return '六'
   }
   if(enText == 'Su'){
      return '日'
   }
}

const getTodaySport = async (userId) => {
   const res = await Api.sport.getTodaySport(userId)
   console.log('getTodaySport',res)
   todaySport.value = res.data
}

const getSportIntegral = async () => {
   // notice.value = '再上12次课，就可以额外再获得288积分了!'
   // checkInList.value = [
   //    {
   //       "date": "2025-01-01",
   //       "points": 100
   //    },
   //    {
   //       "date": "2025-05-12",
   //       "points": 100
   //    },
   //    {
   //       "date": "2025-01-04",
   //       "points": 50
   //    }
   // ]
   const res = await Api.sport.getSportIntegral(startTime.value,endTime.value)
   console.log(res)
   if (res.status === 200) {
      notice.value = res.data.checkIn12.notice
      checkInList.value = res.data.details 
   }
}
</script>
<style lang="scss" scoped>
.sport-calendar {
   display: flex;
   width: 750rpx;
   padding-top: 32rpx;
   padding-bottom: 34rpx;
   background: #FFFFFF;

   .calendar-item {
      width: 108rpx;
      height: 100%;

      .week {
         font-size: 28rpx;
         color: #999999;
         text-align: center;
      }

      .week-content {
         position: relative;
         padding-top: 24rpx;
         box-sizing: border-box;

         .day {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56rpx;
            height: 56rpx;
            margin: 0 auto;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
            text-align: center;
            box-sizing: border-box;
         }

         .reward {
            margin-top: 50rpx;
            text-align: center;

            .icon {
               width: 44rpx;
               height: 44rpx;
            }

            .reward-text {
               font-family: PingFangSC, PingFang SC;
               font-weight: 600;
               font-size: 24rpx;
               color: #333333;
               line-height: 34rpx;
               text-align: center;
               font-style: normal;
            }
         }

         .line {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 2px;
            height: 100%;
         }
      }
   }

   .current-day {
      .week {
         color: #7966B3;
         font-weight: 600;
      }

      .week-content {
         .day {
            background: #7966B3;
            color: #FFFFFF;
            border-radius: 50%;
         }
      }
   }
}
.today{
   padding: 32rpx;
   padding-top: 0;
   box-sizing: border-box;
   background: #FFFFFF;
   .today_cont{
      padding-top: 32rpx;
      border-top: 1rpx solid #C4D1E3;
      box-sizing: border-box;
      display: flex;
      .name{
         position: relative;
         color: #7966B3;         
         font-weight: 600;
         padding-right: 18rpx;
         font-size: 28rpx;
         color: #7966B3;
         line-height: 40rpx;
         margin-right: 20rpx;
         box-sizing: border-box;
         &::after{
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            content: '';
            width: 2rpx;
            height: 20rpx;
            background: #C4D1E3;
            border-radius: 2rpx;

         }
      }
      .today_text{
         display: flex;
         align-items: center;
         margin-right: 40rpx;
         .today_text_left{
            color: #999;
            font-size: 28rpx;
            line-height: 40rpx;
            margin-right: 10rpx;
         }
         .today_text_right{
            color: #333333;
            font-size: 28rpx;
            line-height: 40rpx;
         }
      }
   }
}
.tips {
   display: flex;
   align-items: center;
   margin: 0 auto;
   width: 702rpx;
   background: #E8EBF3;
   border-radius: 0rpx 0rpx 40rpx 40rpx;
   padding: 28rpx 32rpx;
   box-sizing: border-box;

   .tips-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
   }

   .tips-text {
      font-size: 28rpx;
      color: #333333;
   }
}
</style>
